<template>
  <div class="orderListContainer">
    <div class='navbar'><mp-navbar :tabs="tabs" :activeIndex='activeIndex' @tabClick="tabClick"></mp-navbar></div>
    <div class='info-card-wrap'>
        <scroll-view  style="height:100%" :scroll-y="true" @scrolltolower="scrolltolower">
            <div class='card-wrap' v-for='(item,index) in dataList' :key='index' :item='item' @click='toDetail(item.id,item.readFlag)'>
                <div class='card-line'>
                    <div>标题：</div>
                    <div class='value'>{{item.title}}</div>
                    <div class='font-sm'>{{item.readFlag==0?'未读':'已读'}}</div>
                </div>
                <div class='card-line'>
                    <div>时间：</div>
                    <div class='value'>{{item.startTime}}</div>
                    <i-icon type="enter" size="20" color="#c9d7db" />
                </div>
                <div class='card-line'>
                    <div>内容：</div>
                    <div class='value'>{{item.detail}}</div>
                </div>
            </div>
        </scroll-view>
    </div>
  </div>
</template>

<script type="text/javascript">
import mpNavbar from 'mpvue-weui/src/navbar';
import DeviceCard from '@/components/device_card/device_card.vue';
import { mapState } from 'vuex';
export default {
  data() {
    return {
      tabs:['未读','已读'],
      activeIndex:0,
      dataList:[],
      id:null,
      url:'/notice/findUnReadList',
      urls:['/notice/findUnReadList','/notice/findReadList'],
    }
  },
  onShow(){
      this.tabClick(this.activeIndex)
  },
  methods:{
      tabClick(index){
        this.dataList = [];
        this.minId = 0;
        this.activeIndex = index;
        this.queryNotice()
      },
      queryNotice(){
          this.$http.post({
            url:this.urls[this.activeIndex],
            data:{
                ukey:this.userInfo.ukey
            }
           }).then((res)=>{
                if(res.s==0){
                    this.dataList = this.dataList.concat(res.i.Data);
                    
                    
                }
           }).catch((e)=>{
                console.log('请求失败',e)
           })
      },
      scrolltolower(){
          /* if(this.isConnected){
            var minIdObj = this.dataList.reduce((prev,cur)=>{
                return prev.orderId<cur.orderId ? prev : cur;
            })
            if(this.activeIndex!=0) this.sendTime = this.dataList[this.dataList.length-1].orderTime;
            this.minId = minIdObj.orderId;
            this.queryOrder() 
          } */
      },
      toDetail(id,flag){
          wx.navigateTo({
            url:`/pages/notice_detail/main?id=${id}&flag=${flag}`
          })  
      },
  },    
  components: {
    mpNavbar,
    DeviceCard
  },
  computed:{
    ...mapState(['userInfo'])
  }
}
</script>

<style lang='less'>
page{
    background:#eef7fd;
    height:100%;
}
::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
}
.weui-navbar{
    z-index:1;
}
.weui-navbar-slider-on{
    width: 100%!important;
    background-color: #1d7ebf!important;
}
.weui-navbar__item{
    padding: 16rpx 0!important;
    color:#7b7b7b;
    &.weui-bar__item_on{
    color: #1d7ebf!important;
    }
}
.weui-tab{
    border-bottom:none!important;
    background: #fff!important;
}
.orderListContainer{
    height: 100%;
    display: flex;
    flex-direction: column;
    .info-card-wrap{
        height: 50rpx;
        flex:1;
        .card-wrap{
            background: #fff;
            margin: 20rpx 30rpx;
            border:1px solid #e8eae9;
            border-radius: 8rpx;
            .card-line{
                display: flex;
                height: 70rpx;
                margin: 0 20rpx;
                justify-content: space-between;
                align-items: center;
                color:#7b7b7b;
                .value{
                    flex:1;
                }
                .font-sm{
                    font-size:28rpx;
                }
            }
        }
    }
}
</style>
